<script setup lang="ts">
import { ref } from 'vue'
import {
  getDashboardConverts,
  getDashboardDownloads,
  getDashboardPredicts,
  getDashboardUploads,
  getDashboardUsers
} from '@/api/system/dashboard'
import PieCharts from './pieCharts.vue'
import { i18n } from '@/lang'
const { t } = i18n.global

const userData = ref({
  admin_count: 0,
  total_count: 0,
  user_count: 0
})
const uploadData = ref({
  obj_count: 0,
  ply_count: 0,
  stl_count: 0,
  total_count: 0
})
const downloadData = ref({
  convert_download_count: 0,
  predict_download_count: 0,
  total_count: 0,
  upload_download_count: 0
})
const convertData = ref({
  obj_to_ply_count: 0,
  obj_to_stl_count: 0,
  ply_to_obj_count: 0,
  ply_to_stl_count: 0,
  stl_to_obj_count: 0,
  stl_to_ply_count: 0,
  total_count: 0
})
const predictData = ref({
  convert_predict_count: 0,
  failed_count: 0,
  processing_count: 0,
  success_count: 0,
  total_count: 0,
  upload_predict_count: 0
})

const predictEchartRef: any = ref(null)
const convertEchartRef: any = ref(null)
const operateMap = {
  obj_to_ply_count: 'OBJ to PLY',
  obj_to_stl_count: 'OBJ to STL',
  ply_to_obj_count: 'PLY to OBJ',
  ply_to_stl_count: 'PLY to STL',
  stl_to_obj_count: 'STL to OBJ',
  stl_to_ply_count: 'STL to PLY',
  convert_predict_count: 'convert_predict',
  upload_predict_count: 'upload_predict',
  processing_count: 'processing',
  success_count: 'success',
  failed_count: 'failed'
}

// 初始化数据
const initData = () => {
  getDashboardUsers().then((res) => {
    if (!res.data) return
    userData.value = res.data
  })
  getDashboardUploads().then((res) => {
    if (!res.data) return
    uploadData.value = res.data
  })
  getDashboardDownloads().then((res) => {
    if (!res.data) return
    downloadData.value = res.data
  })
  getDashboardConverts().then((res) => {
    if (!res.data) return
    convertData.value = res.data
    const keys = Object.keys(res.data).filter((it) => it.includes('count'))
    const vals = Object.values(res.data).filter((it) => typeof it == 'number')
    convertEchartRef.value?.initBarChart(keys, vals)
  })
  getDashboardPredicts().then((res) => {
    if (!res.data) return
    predictData.value = res.data
    const echartData: any = []
    const keys = Object.keys(res.data).filter((it) => it.includes('count'))
    const vals = Object.values(res.data).filter((it) => typeof it == 'number')
    predictEchartRef.value?.initBarChart(keys, vals)
  })
}

onMounted(() =>
  setTimeout(() => {
    initData()
  }, 1000)
)
</script>
<template>
  <div class="home-page">
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="div-header">{{ t('dashboard.userInfo') }}</div>
          </template>
          <h1>{{ userData.total_count }}</h1>
          <div class="card-bd">
            <el-statistic :title="t('dashboard.admine')" :value="userData.admin_count" />
            <el-divider direction="vertical" />
            <el-statistic :title="t('dashboard.user')" :value="userData.user_count" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="div-header">{{ t('dashboard.uploadInfo') }}</div>
          </template>
          <h1>{{ uploadData.total_count }}</h1>
          <div class="card-bd">
            <el-statistic :title="t('dashboard.obj')" :value="uploadData.obj_count" />
            <el-divider direction="vertical" />
            <el-statistic :title="t('dashboard.ply')" :value="uploadData.ply_count" />
            <el-divider direction="vertical" />
            <el-statistic :title="t('dashboard.stl')" :value="uploadData.stl_count" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="div-header">{{ t('dashboard.downloadInfo') }}</div>
          </template>
          <h1>{{ downloadData.total_count }}</h1>
          <div class="card-bd">
            <el-statistic :title="t('dashboard.uploadDownload')" :value="downloadData.upload_download_count" />
            <el-divider direction="vertical" />
            <el-statistic :title="t('dashboard.convertDownload')" :value="downloadData.convert_download_count" />
            <el-divider direction="vertical" />
            <el-statistic :title="t('dashboard.predictDownload')" :value="downloadData.predict_download_count" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="div-header">
              <el-statistic :title="t('dashboard.convertInfo')" :value="convertData.total_count" />
            </div>
          </template>
          <PieCharts ref="convertEchartRef" />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="div-header">
              <el-statistic :title="t('dashboard.predictInfo')" :value="predictData.total_count" />
            </div>
          </template>
          <PieCharts ref="predictEchartRef" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.home-page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 12px 12px 0 0;
}
.div-header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.box-card {
  width: 100%;
  height: 300px;
  margin-bottom: 12px;
  h1 {
    text-align: center;
    margin-bottom: 2rem;
  }
  .card-bd {
    flex: 1;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
  }
}
</style>
